.page{
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.pageHeader{
    background: linear-gradient(to bottom, rgba($color: $primary-color, $alpha: 0.3), rgba($color: $page-background-color, $alpha: 1));  
    .title{
        font-weight: bold;
        color: $primary-color;
    }
}

.main{
    flex: 1;
    position: relative;
    background-color: $page-background-color;
    ._wrap{
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        overflow-y: auto;
    }
}


.personModule{
    .navs{
        display: flex;
        align-items: center;
        //justify-content: space-between;
        position: sticky;
        top: 0;
        background-color: $page-background-color;
    }

    .tabs{
        flex: 1;
        display: flex;
        .tab{
            line-height: 88px;
            margin-left: 20px;
            font-size: 28px;
            position: relative;
            &:first-of-type{
                margin-left: 0;
            }

            &.selected{
                font-weight: bold;
                color: $primary-color;
                font-size: 32px;
            }
        }
    }

}


.persons{
    display: none;
    &.active{
        display: block;
    }
    .person{
        margin-top: 20px;
        &:first-of-type{
            margin-top: 0;
        }
    }
}

.filter{
    font-size: 32px;
    color: #000;
    display: flex;
    align-items: center;

    .icon{
        display: block;
        width: 28px;
    }
}

.filterMask{
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.6);
}

.filterpopup{
    position: fixed;
    z-index: 12;
    left: 0;
    right: 0;
    background-color: #fff;
}